<template>
  <div v-if="isShowRow">
    <el-table-column :label="label" align="center">
      <template slot-scope="scope">
        <el-form-item :prop="listName + '.' + scope.$index + '.' + targetPropName">
          <span>{{ moneyFormat(scope.row[targetPropName], 'w') }}{{ formatCurrency(scope.row.currency) }}</span>
        </el-form-item>
      </template>
    </el-table-column>
  </div>
</template>

<script>

/**
 * 说明: 将该组件引入到 <el-table> 列表中, 补充好props中的参数,
 * 注: form.currency 必须有值, 列表中的行数据中也要有currency字段
 */
export default {
  components: {},
  /** 属性, 全部必填 **/
  props: {
    label: {
      type: String,
      default: () => this.$t('汇率后金额')
    },
    // 被计算的字段名
    sourcePropName: {
      type: String,
      default: () => '',
      required: true
    },
    // 数组名称
    listName: {
      type: String,
      default: () => '',
      required: true
    },
    // 将计算结果赋值到'字段名'
    targetPropName: {
      type: String,
      default: () => '',
      required: true
    },
    // 主表Form
    form: {
      type: Object,
      default: () => {},
      required: true
    }
  },
  data() {
    return {
      // 遮盖层
      loading: false,
      rowName: '',
      currencyOptions: []
    }
  },
  computed: {
    // 是否展示
    isShowRow: function() {
      if (this.isEmpty(this.form) || this.isEmpty(this.form.exchangeRate)) {
        return false
      }
      if (this.isEmpty(this.form.currency)) {
        return false
      }
      return true
    }
  },
  watch: {
    'form.exchangeRate': {
      handler(val) {
        if (val) {
          this.init()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getDicts('currency').then(response => {
      this.currencyOptions = response.data
    })
  },
  created() {
    // 使用 $watch 监听数组的变化
    this.$watch('form.' + this.listName, (newValue) => {
      if (newValue) {
        this.init()
      }
    }, { deep: true })
  },
  methods: {
    init() {
      this.$nextTick(() => {
        // 必填属性都不为空
        if (!this.isEmpty(this.sourcePropName) && !this.isEmpty(this.targetPropName) && !this.isEmpty(this.form) && !this.isEmpty(this.listName)) {
          this.initData()
        }
      })
    },
    // 根据prop获取index和字段名
    initData() {
      this.form[this.listName] && this.form[this.listName].forEach((item, index) => {
        var rate = this.form.exchangeRate.find(obj => obj.sourceCurrency === item.currency)
        if (rate) {
          var money = item[this.sourcePropName] * rate.rate
          if (isNaN(money)) {
            money = 0
          }
          this.$set(this.form[this.listName][index], this.targetPropName, money)
        } else {
          this.$set(this.form[this.listName][index], this.targetPropName, item[this.sourcePropName])
        }
      })
    },
    formatCurrency(val) {
      const currency = this.currencyOptions.find(obj => obj.dictValue === val)
      if (currency) {
        return '(' + this.$t(currency.dictLabel) + ')'
      }
      return ''
    }
  }
}
</script>

<style scoped>

</style>
